<style scoped>
.demo-upload-list {
    display: inline-block;
    width: 60px;
    height: 60px;
    text-align: center;
    line-height: 60px;
    border: 1px solid transparent;
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
    position: relative;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
    margin-right: 4px;
    margin-top: 10px;
}

.demo-upload-list img {
    width: 100%;
    height: 100%;
}

.demo-upload-list-cover {
    display: none;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, .6);
}

.demo-upload-list:hover .demo-upload-list-cover {
    display: block;
}

.demo-upload-list-cover i {
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    margin: 0 2px;
}

.img-show {
    height: 220px;
    line-height: 220px;
    background: #fff;
    border: 1px dashed #d7dde4;
    border-radius: 4px;
    text-align: center;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: border-color .2s ease;
}

.img-show:hover {
    border: 1px dashed #39f;
}

.ivu-form-item {
    margin-bottom: 17px;
}

.input-width {
    width: 70%
}

.uploadcla {
    display: inline-block;
    width: 58px;
    margin-top: 10px;
}

.uploadcla-coin {
    width: 58px;
    height: 58px;
    line-height: 58px;
}
</style>
<template>
    <div>
    
        <Card :bordered="false" dis-hover>
            <p slot="title">帐号信息详情</p>
            <p slot="extra">
                <Button type="warning" style="margin-left:10px" v-if="!isVip" @click="appVIPModel = true">
                    会员申请
                </Button>
                <Button type="primary" @click="openEditInfor">
                    <span v-if="isDisabled">完善资料</span>
                    <span v-else>保存</span>
                </Button>
            </p>
            <p>
                <Row>
                    <Col span="12">
                    <Form label-position="right" :label-width="100">
    
                        <Form-item label="登录名：">
                            {{userInfor.logonUser}}
    
                        </Form-item>
                        <Form-item label="真实姓名：">
                            {{userInfor.realName}}
                        </Form-item>
                        <Form-item label="性别：">
                            {{util.decode(userInfor.sex,'sex')}}
                        </Form-item>
                        <Form-item label="帐号状态：">
                            {{userInfor.bizState || '未知'}}
                        </Form-item>
                        <Form-item label="安全邮箱：">
                            {{userInfor.email}}
                        <!--    <Button type="dashed" style="margin-left:10px" @click="sendEmail">验证邮箱</Button>-->
                        </Form-item>
                        <Form-item label="绑定手机：">
                            {{userInfor.mobileTel ||'未绑定'}}
                        </Form-item>
                        <Form-item label="注册时间：">
                            {{userInfor.createTime ||'默认'}}
                        </Form-item>
                    </Form>
                    </Col>
                    <Col span="12">
                    <h1>上传头像</h1>
                    <br>
                    <div class="img-show">
                        <img v-if="userInfor.pictContent" :src="userInfor.pictContent">
                        <Icon v-else type="images" size="52" style="color: #3399ff"></Icon>
                    </div>
    
                    <Upload type="drag" ref="upload" :default-file-list="defaultList" :show-upload-list="false" :before-upload="handleBeforeUpload" :format="['jpg','jpeg','png']" :on-format-error="handleFormatError" :action="uploadPath" :on-success="handleSuccess" :max-size="2048" :on-exceeded-size="handleMaxSize" class="uploadcla">
                        <div class="uploadcla-coin">
                            <Icon type="camera" size="20"></Icon>
                        </div>
                    </Upload>
    
                    <div class="demo-upload-list" v-for="item in uploadList">
                        <template v-if="item.status === 'finished'">
                            <img :src="item.url">
                            <div class="demo-upload-list-cover">
                                <Icon type="ios-checkmark" @click.native="chooseImg(item)"></Icon>
                                <Icon type="ios-trash-outline" v-if="item.del!=='N'" @click.native="delImg(item)"></Icon>
                            </div>
                        </template>
                        <template v-else>
                            <Progress v-if="item.showProgress" :percent="item.percentage" hide-info></Progress>
                        </template>
                    </div>
    
                    </Col>
                </Row>
    
            </p>
        </Card>
        <Card :bordered="false" dis-hover>
            <p slot="title">登录历史</p>
            <p>
                <Alert show-icon>登录历史只记录最近20条，请您核对登录时间及地点，如您确定在某时间未登录过，请立即“修改登录密码”以保障账号安全
                </Alert>
                <Table :columns="hisColumns" :data="hisData" size="small"></Table>
            </p>
        </Card>
        <Modal v-model="editModel" title="用户信息编辑" class-name="vertical-center-modal" ok-text="提交" @on-ok="editSubmit" :mask-closable="false">
           <!-- <Alert show-icon>安全邮箱，绑定手机请在“
                <a>账号安全</a>”功能操作
            </Alert>-->
            <Form :model="editInfor" ref='userInfor' :rules="rule_data" :show-message="false" :label-width="100">
                <Form-item label="真实姓名：" prop="realname">
                    <Input v-model="editInfor.realName" placeholder="请输入真实姓名"></Input>
                </Form-item>
    
                <Form-item label="性别：">
                    <Radio-group v-model="editInfor.sex">
                        <Radio label="M">男</Radio>
                        <Radio label="F">女</Radio>
                    </Radio-group>
                </Form-item>
                <Form-item label="安全邮箱：">
                    {{userInfor.email}}
                </Form-item>
                <Form-item label="联系电话：">
                    {{userInfor.mobileTel}}
                </Form-item>
            </Form>
        </Modal>
    
        <Modal v-model="appVIPModel" title="会员申请" class-name="vertical-center-modal">
            <Steps :current="applyStep" size="small">
                <Step title="填写公司信息" content="完善公司信息"></Step>
                <Step title="审核结果" content="查看平台审核结果"></Step>
            </Steps>
            <hr class="mg-10" />
            <Form :model="vipInfor" ref='vipInfor' :rules="rule_data" :label-width="100" v-if="applyStep ===0">
                <Form-item label="公司名称：" prop="comName">
                    <Input v-model="vipInfor.comName" placeholder="请输入公司名称"></Input>
                </Form-item>
                <Form-item label="安全邮箱：">
                    {{userInfor.email}}
                </Form-item>
                <!--<Form-item label="联系电话：">
                                                        <Input v-model="editInfor.realName" placeholder="请输入联系电话"></Input>
                                                    </Form-item>-->
                <Form-item label="备注信息：">
                    <Input v-model="vipInfor.remark" type="textarea" :rows="2" placeholder="请输入..."></Input>
                </Form-item>
            </Form>
            <template v-if="applyStep ===1">
                <Alert show-icon :type="alertType">{{checkmsg}}
                </Alert>
                <Form :label-width="100">
                    <Form-item label="公司名称：">
                        {{vipInfor.comName}}
                    </Form-item>
                    <Form-item label="安全邮箱：">
                        {{userInfor.email}}
                    </Form-item>
                    <!--<Form-item label="联系电话：">
                                                    <Input v-model="editInfor.realName" placeholder="请输入联系电话"></Input>
                                                </Form-item>-->
                    <Form-item label="备注信息：">
                        {{vipInfor.remark}}
                    </Form-item>
                </Form>
            </template>
    
            <div slot="footer">
                <template v-if="applyStep ===0">
                    <Button type="primary" @click="apiApplySubmit('vipInfor')">提交</Button>
                </template>
                <template v-else-if="applyStep ===1">
                    <Button @click="applyStep=0" v-if="toEdit">返回修改</Button>
                    <Button type="primary" @click="appVIPModel=false">关闭</Button>
                </template>
            </div>
        </Modal>
    </div>
</template>

<script>
export default {
    data() {
        return {
            toEdit: false,
            alertType: 'info',
            checkmsg: "未知",//审核信息
            applyStep: 0,
            appVIPModel: false,
            vipInfor: {},
            rule_data: {
                comName: [
                    { required: true, message: '请输入公司名称', trigger: 'blur' },
                ],
                realname: [
                    { required: true, message: '请输入真实姓名', trigger: 'blur' },
                ],

            },
            isDisabled: true,
            editModel: false,
            userInfor: {
                pictContent: '',
            },
            editInfor: {},
            uploadList: [],
            defaultList: [{
                'name': '078ce8fb63',
                'url': 'https://obs.myhwclouds.com/csylcloud-file/img/078ce8fb63.jpg',
                'del': 'N'
            },
            {
                'name': 'a2410e8d01',
                'url': 'https://obs.myhwclouds.com/csylcloud-file/img/a2410e8d01.jpg',
                'del': 'N'
            }, {
                'name': '8b1db0bfc9',
                'url': 'https://obs.myhwclouds.com/csylcloud-file/img/8b1db0bfc9.jpg',
                'del': 'N'
            }, {
                'name': '9fe54a7cae',
                'url': 'https://obs.myhwclouds.com/csylcloud-file/img/9fe54a7cae.jpg',
                'del': 'N'
            }, {
                'name': 'f64169b534',
                'url': 'https://obs.myhwclouds.com/csylcloud-file/img/f64169b534.jpg',
                'del': 'N'
            }
            ],
            uploadPath: this.$setting.gbs.host + "/common/file/upload?access_token=" + this.$store.getters.getToken,
            hisColumns: [
                {
                    title: '登录时间',
                    key: 'createdate'
                },
                {
                    title: '登录地点',
                    key: 'loginAddress'
                },
                {
                    title: 'IP地址',
                    key: 'ipAddress'
                }
            ],
            hisData: []
        }
    },
    computed: {
        isVip(){
            
            return this.$store.getters.isVip;
        },
    },
    methods: {
        ckeckApply() {
            if (!this.isVip) {
                this.axios.post("account/applyCheck").then((res) => {
                    this.applyStep = 1;
                    if (res.errorCode == 0) {
                        if (res.data.apply === "N") {
                            this.applyStep = 0;
                        } else {
                            if ("1" === res.data.state) {
                                this.checkmsg = "审核中，请稍候...";
                            } else if ("2" === res.data.state) {
                                this.checkmsg = "恭喜您，会员审核通过，可以用过会员菜单管理会员接口";
                                this.alertType = "success";
                                this.$store.dispatch('update_vip', {
                                    vip: 1
                                })
                            } else if ("3" === res.data.state) {
                                this.alertType = "error";
                                this.checkmsg = "Sorry，您的申请未审核通过,原因：" + res.data.result;
                                this.toEdit = true;
                            }
                            // this.checkmsg = res.data.state;
                            this.vipInfor.comName = res.data.comName;
                            this.vipInfor.remark = res.data.remark;
                        }
                    } else {
                        this.$Message.error(res.message);
                    }
                })
            }

        },
        valiForm(formid) {
            let res = false;
            this.$refs[formid].validate((valid) => {
                if (valid) {
                    res = true;
                } else {
                    this.$Message.error('请录入完整的信息!');
                    res = false;
                }
            })
            console.log(res);
            return res;
        },
        apiApplySubmit(formid) {
            if (this.valiForm(formid)) {
                this.axios.post("account/applyVip", this.vipInfor).then((res) => {
                    if (res.errorCode == 0) {
                        this.applyStep = 1;
                        this.checkmsg = res.message;
                    } else {
                        //this.$Message.error(res.message);
                    }

                })
            }

        },
        getLoginHis() {
            this.axios.post("account/loginhis").then((res) => {
                if (res.errorCode == 0) {
                    this.hisData = res.data.list;
                }
            })
        },
        openEditInfor() {
            this.editInfor = this.util.deepCopy(this.userInfor);
            this.editModel = true;
        },
        sendEmail() {
            this.$Modal.info({
                title: '邮箱验证',
                content: '已向您邮箱发送了一封验证邮件，请尽快验证！'
            });
        },
        handleSuccess(res, file, fileList) {
            file.url = res.data[0].original.path + res.data[0].original.name;
            file.name = res.data[0].original.name;
            setTimeout(this.saveUpload(file), 100);//异步保存上传的头像
        },
        saveUpload(file) {
            this.axios.post("account/saveupload", file);
        },
        delImg(item) {
            this.axios.post("account/delupload", { url: item.url }).then((res) => {
                if (res.errorCode == 0) {
                    const fileList = this.$refs.upload.fileList;
                    this.$refs.upload.fileList.splice(fileList.indexOf(item), 1);
                }
            })
        },
        handleBeforeUpload() {
            const check = this.uploadList.length < 11;
            if (!check) {
                this.$Notice.warning({
                    title: '最多只能上传 11 张图片。'
                });
            }
            return check;
        },
        handleMaxSize(file) {
            this.$Notice.warning({
                title: '超出文件大小限制',
                desc: '文件 ' + file.name + ' 太大，不能超过 2M。'
            });
        },
        handleFormatError(file) {
            this.$Notice.warning({
                title: '文件格式不正确',
                desc: '文件 ' + file.name + ' 格式不正确，请上传 jpg 或 png 格式的图片。'
            });
        },
        chooseImg(item) {
            this.axios.post("account/updatepic", { pictContent: item.url }).then((res) => {
                if (res.errorCode == 0) {
                    this.userInfor.pictContent = item.url;
                    //实时显示更新的头像
                    this.$store.dispatch('update_userpic', {
                        picurl: item.url
                    })
                }
            })

        },
        getUserinfo() {
            this.axios.post("account/userdetail").then((res) => {
                if (res.errorCode == 0) {
                    this.userInfor = res.data;
                }
            })

        },
        getUploadList() {
            this.axios.post("account/queryupload").then((res) => {
                if (res.errorCode == 0) {
                    for (let i = 0; i < res.data.length; i++) {
                        let item = res.data[i];
                        let uploadItem = {
                            name: item.guid,
                            url: item.filePath,
                            percentage: 100,
                            status: "finished",
                            uid: item.guid,
                        }
                        this.uploadList.push(uploadItem);
                    }
                }
            })
        },
        editSubmit() {
            this.axios.post("account/updateuser", this.editInfor).then((res) => {
                if (res.errorCode == 0) {
                    this.$Message.success("更新完成！");
                    this.userInfor = res.data;
                    this.$store.dispatch('update_realname', {
                        realName: this.userInfor.realName
                    })
                }
            })
        }
    },
    mounted() {
        this.uploadList = this.$refs.upload.fileList;
        this.getUploadList();
        this.getUserinfo();
        this.getLoginHis();
        this.ckeckApply();
    },
    created() {

    }
}
</script>
